<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    .list1 {
      margin: 100px 100px;
      width: 300px;
      height: 500px;
      border: 1px solid #ccc;
      text-align: center;
      font-size: 20px;
      float: left;
    }
    button {
      width: 100px;
      height: 40px;
      margin-top: 20px;
    }
    .suibian {
      float: left;
      margin-top: 200px;
    }
  </style>
  <body>
    <div class="list1">
      <h4><input type="checkbox" id="left-all" /> 列表一</h4>
      <ul id="left-ul">
        <li><input type="checkbox" name="leftLi" />苹果1</li>
        <li><input type="checkbox" name="leftLi" />苹果2</li>
        <li><input type="checkbox" name="leftLi" />苹果3</li>
      </ul>
    </div>
    <div class="suibian">
      <div><button id="rightBtn">→</button></div>
      <div><button id="leftBtn">←</button></div>
    </div>
    <div class="list1">
      <h4><input type="checkbox" id="right-all" /> 列表二</h4>
      <ul id="right-ul">
        <li><input type="checkbox" name="rightLi" />葡萄1</li>
        <li><input type="checkbox" name="rightLi" />葡萄2</li>
        <li><input type="checkbox" name="rightLi" />葡萄3</li>
      </ul>
    </div>
  </body>

  <script>
    //页面加载函数
    window.onload = function () {
      //通过ID找到右左箭头的对象 进行绑定点击事件 并给事件相应的函数 fun
      document.getElementById('rightBtn').onclick = fun
      document.getElementById('leftBtn').onclick = fun
      //箭头点击事件触发函数
      function fun() {
        //判断一下当前点击的是左箭头还是右箭头
        if (this.innerHTML == '→') {
          //如果是右箭头 就找到左边的所有复选框对象
          var liObj = document.getElementsByName('leftLi')
          //父级列表一的 ul对象
          var ulObj = document.getElementById('left-ul')
        } else {
          //如果是左箭头 就找到右边的所有复选框对象
          var liObj = document.getElementsByName('rightLi')
          var ulObj = document.getElementById('right-ul')
        }
        //循环找到li 复选框对象
        for (var i = 0; i < liObj.length; i++) {
          //如果是选中的li
          if (liObj[i].checked) {
            //创建一个新的li对象 用于 追加到另外一边 参数1 文本值，参数2是箭头
            createList(liObj[i].nextSibling.nodeValue, this.innerHTML)
            //删除转移的节点
            ulObj.removeChild(liObj[i].parentNode)
            //校准下标
            i--
          }
        }
      }
      //创建节点li和复选框的函数
      function createList(txt, n) {
        //创建li节点对象
        var liObj = document.createElement('li')
        //创建复选节点对象
        var chxObj = document.createElement('input')
        //复选框加上属性type = checkbox
        chxObj.type = 'checkbox'
        //创建一个文本节点
        var txtObj = document.createTextNode(txt)
        //判断是左还是右
        if (n == '→') {
          //给name 加上属性值为右边的
          chxObj.name = 'rightLi'
          //找到右边复选框的父级 ul
          var obj = document.getElementById('right-ul')
        } else {
          //给name 加上属性值为左边的
          chxObj.name = 'leftLi'
          //找到右边复选框的父级 ul
          var obj = document.getElementById('left-ul')
        }
        //吧复选框追到到li内
        liObj.appendChild(chxObj)
        //吧文本追到到li内
        liObj.appendChild(txtObj)
        //吧li追加到ul内
        obj.appendChild(liObj)
        //绑定一下改变事件
        bindChange()
      }
      bindChange() //页面加载完毕的时候调用
    }
    //绑定一下全选的改变的事件
    function bindChange() {
      //找到左右2个全选框 绑定改变事件
      document.getElementById('left-all').onchange = fn
      document.getElementById('right-all').onchange = fn
      function fn() {
        //当前全选框的状态
        var allStatus = this.checked //全选状态 true /false
        //如果当前的id是左边的全选
        if (this.id == 'left-all') {
          //就找左边的子复选框
          var checkboxObj = document.getElementsByName('leftLi') //找到第一个列表所有的子复选框
        } else {
          //就找右边的子复选框
          var checkboxObj = document.getElementsByName('rightLi')
        }
        //循环 改变每个的值 == 全选的状态
        for (var i = 0; i < checkboxObj.length; i++) {
          checkboxObj[i].checked = allStatus
        }
      }
    }
  </script>
</html>
